<template>
  <div class="box">
    <div class="top">
      <p>“团餐”膳食饮食</p>
    </div>
    <div class="site" @click="shequ()">
      <p>嘉宾花园店 ></p>
    </div>
    <div class="invite" @click="yaoqing()">
      <img src="../../../../static/img2/04.jpg" alt="" class="demo"/>
      <p style="font-size: 15px; font-weight: bold; width: 230px">
        邀请企业入驻得<span style="color: red">百元红包</span>
      </p>
      <p style="color: #aaa; font-size: 13px; font-weight: bold">点击领取</p>
      <div class="play">开 ></div>
    </div>
    <div class="text gradient-wrapper">
      <p class="text-a1">恭喜，山东科技刀刀有限公司加入团体团餐！</p>
      <p class="text-a" style="top:30px">恭喜，青岛海龙有限公司加入团体团餐！</p>
    </div>
    <div class="firm">
      <div>
        <img class="demo" src="../../../../static/img2/05.jpg" alt="" style="animation-iteration-count: 10;"/>
        <p @click="cjqy()">创建企业</p>
        <span>没有找到我的企业</span>
      </div>
      <div @click="shequ()">
        <img class="demo" src="../../../../static/img2/06.jpg" alt=""  style="animation-iteration-count: 10;"/>
        <p>加入企业</p>
        <span>查找加入我的企业</span>
      </div>
    </div>
    <!-- 选项 -->
    <div class="Home_dataList">
      <div
        class="Home_xuan"
        v-for="(item, index) in dataList"
        :key="index"
        @click="active(index)"
      >
        {{ item }}
        <span :class="nowindex === index ? 'active' : ''"></span>
      </div>
    </div>
      <div
        class="Home_tranction"
        v-for="item in this.nowindex === 0 ? this.List : rightList"
        :key="item.Id"
        v-show="Vif"
      >
        <div class="Home_left">
          <div class="img" @click="dianji('tuancan')">
            <img :src="item.Shop_avatar" alt="" />
          </div>
          <div class="Home_li">
            <p class="Home_redd">
              <b>￥ {{ item.Order_number }}</b>
            </p>
            <p class="Home_hui">
              市场价：
              <span class="Home_shan">￥ 30</span>
            </p>
          </div>
        </div>
        <div class="Home_right">
          <div class="right_title">
            <div>
              <h3>{{ item.Name }}</h3>
              <span class="gengduo">
                <i class="iconfont icon-share"></i>
              </span>
              <span class="lei">团餐</span>
            </div>
            <div>
              <span class="hui">共服务{{ item.Number_of_services }}次</span>
              <span class="btn">企业团购</span>
            </div>
            <div>
              <span class="blue">起订份{{ item.Order_number }}份</span>
            </div>
            <div>
              <span class="quan">{{ item.Order_number }}钟服务套餐</span>
              <span class="juli">1.2km</span>
            </div>
          </div>
          <div class="right_li">
            <p class="right_redd">水煮肉片+炒豆角+慢支豆腐+酸辣土豆丝</p>
            <p class="right_hui">主食:馒头/米饭</p>
          </div>
        </div>
      </div>

    <YAOQING v-if="flag" @fanhuis="fanhuia"/>
    <TUANCAN v-if="flagn" @tuantuis="tuantuia" />
  </div>
</template>

<script>
import YAOQING from "./yaoqing/yaoqing.vue"
// import TUANCAN from "./view2/tuancan/index.vue";
import TUANCAN from "../home/view2/tuancan/index.vue";

import axios from 'axios'

export default {
  name: "Home",
  components:{
    YAOQING,TUANCAN
  },
  data() {
    return {
      msg: "测试",
      dataList: ["精美团餐", "特色早餐", "减肥降压", "其他标签", "其他团餐"],
      nowindex: 0,
      time:'',
      flag:false,
      rightList: [],
      List: [],
      Vif : false,
      flagn:false
    };
  },
  methods:{
    active(index) {
      this.nowindex = index;
      this.Vif = false;
      this.rightList = this.List.filter((item) => {
        if (item.Ids == this.nowindex) {
          return item.Ids == this.nowindex;
        } else if (this.nowindex === 0) {
          return this.List;
        }
      });
      setTimeout(() => {
        this.Vif = true;
      }, 200);
      
    },
    dianji(e) {
      if (e === "bancheng") {
        this.$router.push("/dishes");
      } else if (e === "shuiguo") {
        this.$router.push("/fruit");
      } else if (e === "peican") {
        this.$router.push("/catering");
      } else if (e === "tuancan") {
        this.flagn = true;
      } else if (e === "chushi") {
        this.$router.push("/GoldChef");
      }
    },
    yaoqing(){
      this.flag=true
   },
   fanhuia(){
     this.flag=false
   },
   shequ(){
     this.$router.push('/shequ')
   },
    cjqy(){
     this.$router.push('/qylb')
   },
   tuantuia() {
      this.flagn = false;
    },
  },
  created() {
    axios.post("/api/get_shpos").then((res) => {
      this.List = res.data;
      
      console.log(this.List);
    });
  },
    mounted() {
    // console.log(this.$store.state.list2);
    this.Vif = true;
  },
};
</script>

<style scoped>

.box {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.top {
  width: 100%;
  height: 30px;
}
.top p {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}
.site {
  width: 100%;
  height: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.site p {
  float: left;
  font-weight: bold;
  font-size: 15px;
  margin-left: 10px;
}
.invite {
  width: 95%;
  height: 100px;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 0 5px 1px #aaa;
}
.invite img {
  float: right;
  margin: 20px;
}
@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }
  5%,
  15% {
    transform: scale(1.2) rotate(10deg);
  }
  10%,
  20% {
    transform: scale(1.2) rotate(-10deg);
  }
  25%,
  45%,
  65%,
  85% {
    transform: scale(1) rotate(10deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1) rotate(-10deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}
.demo {
  animation: sucaijiayuan 1s 0.1s ease both;
  animation: tada 1s 0.1s ease both;
  animation-name: scaleDraw;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}
.invite p {
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}
.play {
  float: left;
  width: 35px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  background-color: red;
  font-weight: bold;
  color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 10px;
}
.text {
  width: 100%;
  height: 90px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  position:relative;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-10%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes p-gradient {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(50%);
  }
}

.gradient-wrapper {
  display: inline-block;
  animation: wrapper-gradient 2s linear;
}

.gradient-wrapper > p {
  
  animation: p-gradient 2s linear;
  animation-iteration-count: infinite;
}
.text p {
  width: 95%;
  height: 25px;
  position:absolute;
  display: inline-block;
  font-size: 13px;
  line-height: 25px;
  color: red;
  background: -webkit-linear-gradient(left, rgb(250, 229, 189), white);
  margin-left: 10px;
  padding-left: 10px;
  border-radius: 5px;
}
.firm {
  width: 95%;
  height: 100px;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 0 5px 1px #aaa;
  margin-bottom: 5px;
}
.firm div {
  float: left;
  width: 50%;
}
.firm img {
  float: left;
  margin: 30px 10px;
}
.firm p {
  font-weight: bold;
  margin-top: 25px;
}
.firm span {
  color: #aaa;
  font-size: 13px;
}
.Home_dataList {
  width: 100%;
  height: 30px;
  margin-top: 20px;
}
.Home_xuan {
  float: left;
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.active {
  width: 60px;
  display: block;
  background: rgb(255, 165, 0);
  height: 7px;
  border-radius: 50px 50px 0 0;
  margin-top: -13px;
  margin-left: 10px;
}
.Home_shai {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  float: left;
}
.Home_shai > div {
  float: left;
  width: 20%;
  height: 30px;
  margin-left: 3px;
  text-align: center;
  font-size: 13px;
}
.Home_tranction {
  width: 100vw;
  height: 200px;
  float: left;
  display: block;
}
.Home_left {
  width: 35%;
  height: 100%;
  float: left;
}
.Home_left .img {
  width: 130px;
  height: 130px;
  margin-left: 8px;
  margin-top: 8px;
}
.Home_left img {
  width: 130px;
  height: 130px;
}
.Home_li {
  width: 100%;
  height: 30px;
  font-size: 13px;
  margin-top: 10px;
}
.Home_li p {
  margin-left: 10px;
}
.Home_shan {
  text-decoration: line-through;
}
.Home_redd {
  animation-duration: 1s;
  animation-name: animateLeft;
}
.Home_hui {
  color: #ccc;
  animation-duration: 1.9s;
  animation-name: animateLeft;
}
.img {
  animation-duration: 1.5s;
  animation-name: animateLeft;
}
@keyframes animateLeft {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
}
.Home_right {
  width: 63%;
  height: 100%;
  float: right;
}
.right_title {
  margin-top: 8px;
  width: 100%;
  height: 130px;
}
.right_redd {
  font-size: 13px;
  float: right;
  margin-right: 20px;
  animation-duration: 1.9s;
  animation-name: animateright;
}
.right_hui {
  font-size: 13px;
  float: right;
  color: #ccc;
  margin-top: 5px;
  margin-right: 20px;
  animation-duration: 1.5s;
  animation-name: animateright;
}
@keyframes animateright {
  0% {
    opacity: 0;
    transform: translate3d(500px, 0, 0);
  }
}
.right_li {
  width: 100%;
  height: 30px;
  font-size: 13px;
  margin-top: 10px;
}
.right_title h3 {
  margin: 5px 0 5px 0;
  float: left;
  animation-duration: 1.1s;
  animation-name: animateright;
}
.right_title > div {
  width: 100%;
  height: 30px;
  float: left;
}
.hui {
  width: 120px;
  color: #ccc;
  font-size: 13px;
  display: block;
  margin-top: 8px;
  float: left;
  margin-bottom: 7px;
  animation-duration: 1.2s;
  animation-name: animateright;
}
.blue {
  font-size: 13px;
  float: left;
  display: block;
  animation-duration: 1.3s;
  animation-name: animateright;
  color: rgb(92, 190, 250);
}
.quan {
  float: left;
  display: block;
  width: 120px;
  margin-top: 5px;
  text-align: center;
  border: 1px solid rgb(255, 165, 0);
  border-radius: 50px;
  font-size: 14px;
  animation-duration: 1.1s;
  animation-name: animateright;
  color: rgb(255, 165, 0);
}
.lei {
  width: 40px;
  display: block;
  float: right;
  color: rgb(255, 118, 59);
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
  margin-right: 10px;
  animation-duration: 0.5s;
  animation-name: animateright;
  background: rgb(255, 232, 222);
}
.juli {
  display: block;
  width: 50px;
  float: right;
  margin-top: 5px;
  font-size: 13px;
  margin-right: 13px;
  animation-duration: 1.5s;
  animation-name: animateright;
}

.right_title .gengduo {
  width: 40px;
  display: block;
  float: right !important;
  font-size: 13px;
  margin-top: 10px;
  margin-right: px;
  animation-duration: 1.5s;
  animation-name: animateright;
}
.btn {
  width: 65px;
  font-size: 14px;
  height: 30px;
  border-radius: 50px;
  color: white;
  font-size: 13px;
  padding: 5px;
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  animation-duration: 1.5s;
  animation-name: animateright;
  background: rgb(46, 173, 249);
}
</style>